
<template>
  <div class="root">
    <div class="background">
      <div class="text">
        <i
          class="el-icon-arrow-left"
          @click="
            () => {
              this.$router.push('/');
            }
          "
        >
          返回首页
        </i>
        在线报名
        <el-button class="button" type="primary" @click="login"
          >立即登录</el-button
        >
      </div>
      <div class="content">
        <van-form validate-trigger>
          <van-field
            :required="true"
            v-model="name"
            placeholder="输入姓名"
            name="姓名"
            label="姓名"
            :rules="[{ required: true, message: '姓名不得为空' }]"
          />

          <van-field
            :required="true"
            v-model="idnumber"
            placeholder="输入身份证号"
            label="身份证号码"
            :rules="[{ required: true, message: '输入身份证号' }]"
          />

          <van-field
            :required="true"
            v-model="typeWork"
            placeholder="工种"
            label="工种"
            :readonly="true"
            :rules="[{ required: true, message: '请选择工种' }]"
            @click="showWorkPopup"
          />

          <!-- <van-field
            v-model="level"
            placeholder="请选择等级"
            label="等级"
            :rules="[{ required: true, message: '等级' }]"
            @click="showLevelPopup"
          /> -->
          <van-field
            :required="true"
            v-model="type"
            placeholder="人员类别"
            label="人员类别"
            :readonly="true"
            :rules="[{ required: true, message: '人员类别' }]"
            @click="showTypePopup"
          />

          <van-field
            v-show="showcompany"
            v-model="company"
            placeholder="企业名称"
            label="企业名称"
          />

          <van-field
            :required="true"
            v-model="isphone"
            placeholder="输入联系电话"
            label="联系电话"
            name="phone"
            :rules="[{ phone, required: true, message: '输入联系电话' }]"
          />
        </van-form>
        <van-popup position="bottom" v-model="workshow">
          <van-cascader
            v-model="Cascadervalue"
            style="width: 100%"
            :options="subjectListTree"
            label="工种"
            placeholder="请选择工种"
            @close="workshow = false"
            :field-names="{
              text: 'title',
              value: 'id',
              children: 'children',
            }"
            @finish="subChange"
          />
        </van-popup>
        <!-- <van-popup position="bottom" v-model="levelshow"
            ><van-picker
              title="等级"
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="levelshow = false"
          /></van-popup> -->
        <van-popup position="bottom" v-model="typeshow"
          ><van-picker
            title="人员类别"
            show-toolbar
            :columns="peopletype"
            @confirm="ontypeConfirm"
            @cancel="typeshow = false"
        /></van-popup>

        <div
          class="box_form_title"
          style="margin-top: 10px; margin-bottom: 10px"
        >
          <el-button type="primary" @click="commit">提交</el-button>
        </div>
      </div>
    </div>

    <!-- <iframe :src="iframeSrc">
        </iframe> -->
  </div>
</template>

<script>
import { subjectList, applyAdd } from "@/api/apply.js";
import { mapGetters } from "vuex";
export default {
  components: {},

  data() {
    return {
      username: "",
      isphone: "",
      IDCard:
        /^[1-9]\d{5}(17|18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/, //身份证号校验
      phone: /^1[3456789]\d{9}$/, //手机号校验
      subjectListTree: [],
      Cascadervalue: "",
      columns: ["杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华", "衢州"],
      name: "",
      ruleForm: {},
      rules: {},
      show: false,
      idnumber: "",
      typeWork: "",
      level: "",
      type: "",
      company: "",
      workshow: false,
      typeshow: false,
      levelshow: false,
      subject_ids: "",
      subject_id: "",
      peopletype: ["企业在职职工", "失业人员"],
      showcompany: false,
    };
  },
  computed: {
    ...mapGetters(["init", "http"]),
  },
  watch: {
    type(val) {
      console.log(val);
      if (val == "企业在职职工") {
        this.showcompany = true;
      }
    },
  },
  methods: {
    subChange(value) {
      let selected = [];

      value.selectedOptions.map((item) => {
        selected.push(item.id);
      });
      this.subject_ids = selected.join(",");
      this.workshow = false;
      this.subject_id = value.value;

      this.typeWork = value.selectedOptions
        .map((option) => option.title)
        .join("/");
      console.log(value, "777");
    },
    //科目
    subject() {
      subjectList().then((res) => {
        if (res.code == 200) {
          let arr = res.data;
          arr.map((item) => {
            if (item.title == "职业技能等级认定") {
              this.subjectListTree = item.children;
            }
          });
        }
      });
    },
    ontypeConfirm(val) {
      this.typeshow = false;
      this.type = val;
    },
    onCancel() {},
    login() {
      window.open(this.http + "/user", "_self");
    },
    commit() {
      if (!this.IDCard.test(this.idnumber)) {
        this.$toast.fail({
          message: "请输入正确身份证号",
        });
      } else if (this.name == "") {
        this.$toast.fail({
          message: "请填姓名",
        });
      } else if (this.typeWork == "") {
        this.$toast.fail({
          message: "请选择工种",
        });
      } else if (this.type == "") {
        this.$toast.fail({
          message: "请选择人员类别",
        });
      } else if (!this.phone.test(this.isphone)) {
        this.$toast.fail({
          message: "请填写正确手机号",
        });
      } else {
        applyAdd({
          gz: "职业技能等级认定",
          exam_type: this.typeWork,
          subject_id: this.subject_id,
          subject_ids: this.subject_ids,
          nickname: this.name,
          username: this.idnumber,
          company: this.company,
          phone: this.isphone,
          depid: 2,
          position: this.type,
        }).then((res) => {
          if (res.code == 200) {
            this.$toast.success("报名成功");
            this.login();
          } else {
            this.$toast.error(res.msg);
          }
        });
      }
    },
    showWorkPopup() {
      this.workshow = true;
    },
    showTypePopup() {
      this.typeshow = true;
    },
    showLevelPopup() {
      this.levelshow = true;
    },
  },
  created() {
    this.subject();
  },
};
</script>
<style lang="scss" scoped>
.root {
  position: relative;
  overflow: hidden;
  background: #eee;
}
.background {
  height: 100vh;
  width: 100vw;
  padding: 1.7vh 0vw;
  background: url("~@/assets/mobile/bg.jpg") no-repeat;
  background-size: 100%;

  .text {
    width: 100%;
    padding: 5.3vh 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: #fff;
    font-weight: 600;
    position: relative;
    i {
      position: absolute;
      left: 3%;
      top: 10%;
      font-size: 1rem;
    }
    .button {
      position: absolute;
      right: 3%;
      top: 5%;
      // font-size: 1rem;
      padding: 10px;
      background: #f78109;
      border: #f78109;
    }
  }
  .content {
    width: 100%;
    background: #fff;
    border-radius: 0.75rem;

    padding: 1.7vh 0vw;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 1.7vh;
    height: calc(100vh - 10.6vh - 1.125rem - 3.4vh);
    overflow: auto;
    .box_form_title {
      text-align: center;
    }
  }
}
::v-deep {
  .el-form-item__content {
    line-height: 16px !important;
  }
  .lablesClass {
    font-size: 1rem;
  }
  .vant {
    font-size: 1rem !important;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: " ";
      pointer-events: none;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #ccc;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  .van-cell {
    font-size: 1rem !important;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: " ";
      pointer-events: none;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #ccc;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  .el-form-item__label {
    font-size: 1rem !important;
  }

  .catie {
    .van-cell__value {
      margin-top: 30px !important;
    }
    .van-cell {
      .van-icon {
        margin-top: 30px !important;
      }
    }
  }
}
.DomImg {
  position: absolute;
  z-index: -5;
  .A4page {
    width: calc(595px * 2);
    height: calc(840px * 2);
    // background:url('~@/assets/logo/pdfbg.png') no-repeat;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    color: #000;
    position: relative;
    padding: 150px 150px;
    u {
      // text-decoration:underline;
      border-bottom: 1px solid #333;
      // display: inline-block;
      // padding:0 80px;
    }
    p {
      margin: 0;
      font-size: 30px;
      line-height: 80px;
    }
    h1 {
      text-align: center;
      // font-weight: 600;
      font-size: 40px;
    }
  }
}
#DomImgzjbl {
  top: 0;
  // z-index: 5;
  .A4page {
    padding: 50px 150px;
    p {
      line-height: 60px;
    }
  }
}
</style>